<template>
  <div class="service-more fixed-router">
    <header-close :text="title"></header-close>
    <div class="short-cut">
      <router-link class="item" v-for="(val, key) in list" :key="key" :to="val.link">
        <i class="xffont" :class="val.icon"></i>
        <span>{{val.title}}</span>
      </router-link>
    </div>
  </div>
</template>
<script>
  import HeaderClose from '../../components/header-close/header-close.vue'
  import serviceList, {aServices, bServices, cServices} from '../../common/js/service_list'

  export default {
    components: {HeaderClose},
    data() {
      return {
        title: '',
        list: []
      }
    },
    created() {
      const id = this.$route.params.id
      if (id === 'a') {
        this.title = '我要约'
        this.list = aServices
      } else if (id === 'b') {
        this.title = '我要办'
        this.list = bServices
      } else if (id === 'c') {
        this.title = '我要查'
        this.list = cServices
      } else {
        this.list = serviceList[id].list
        this.title = serviceList[id].title
      }
    }
  }
</script>
<style lang="scss" scoped>
  @import "../../common/style/variable";
  .short-cut{
    display: flex;
    margin: 0 0 3px 0;
    padding: .14rem 0;
    background: #fff;
    flex-wrap: wrap;
    .item{
      width: 50%;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: .2rem;
      text-align: center;
      border-radius: 5px;
      @include active;
      .xffont{
        font-size: 1.2rem;
        color: $primary;
      }
      span{
        margin: .1rem 0 0 0;
      }
    }
  }
</style>
